const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
//页面上提取出来的模板数据
const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}
module.exports = grunt => {
  grunt.initConfig({
    clean: {
      dist: 'dist'
    },
    sass: {
      dist: {
        options: {
          implementation: sass
        },
        files: [{
            expand: true, // 设置为true 下面的属性才可以使用
            cwd: 'src/assets/styles', // 指定需要编译的sass文件的路径
            src: ['*.scss'], // 根据 cwd 所指定的路径去匹配下面的所有scss
            dest: 'temp/assets/styles', // 生成的目标路径
            ext: '.css' // 目标扩展名
        }]
      }
    },
    // js 编译
    babel: {
      //
      options: {
        sourceMap: true,
        presets: ['@babel/preset-env'] //支持对最新的ecamscript的特性的转换
      },
      //配置转换目标
      main: {
        files: [{
          expand: true, // 设置为true 下面的属性才可以使用
          cwd: 'src/assets/scripts', // 指定需要编译的sass文件的路径
          src: ['*.js'], // 根据 cwd 所指定的路径去匹配下面的所有scss
          dest: 'temp/assets/scripts', // 生成的目标路径
           ext: '.js' // 目标扩展名
      }]
        
      }
    },
    // html 编译
    web_swig: {
      options: {
        swigOptions:{
          cache: false
        },
        getData: function(tpl){
            return data;
        }
      },
      //配置转换目标
      main: {
        files: [{
          expand: true, // 设置为true 下面的属性才可以使用
          cwd: 'src', // 指定需要编译的sass文件的路径
          src: ['**/*.html'], // 根据 cwd 所指定的路径去匹配下面的所有html
          dest: 'temp', // 生成的目标路径
          // ext: '.css' // 目标扩展名
      }]
        
      }
    },
    //将public ,image ,font 文件复制到dist
    copy: {
      main: {
        files: [
          {expand: true, src: ['public/**','src/assets/images/**', 'src/assets/fonts/**'], dest: 'dist'}
        ]
      }
    },
    // js 压缩
    uglify: {
      options: {
        mangle: false
      },
      dist: {
        files: {
          'dist/src/assets/scripts/main.js': ['temp/assets/scripts/*.js']
        }
      }
    },
    // css 压缩
    cssmin: {
      target: {
        files: [{
          expand: true,
          cwd: 'temp/assets/styles',
          src: ['*.css',],
          dest: 'dist/src/assets/styles',
          //ext: '.min.css'
        }]
      }
    },
    // html 
    htmlmin: {                                     // Task
      // dist: {                                      // Target
      //   options: {                                 // Target options
      //     removeComments: true,
      //     collapseWhitespace: true
      //   },
      //   files: {                                   // Dictionary of files
      //     'dist/src/**/*.html': 'dist/src/**/*.html',     // 'destination': 'source'
      //     'dist/contact.html': 'src/contact.html'
      //   }
      // },
      dev: {                                       // Another target
        options: {                                 // Target options
          removeComments: true,
          collapseWhitespace: true,
          minifyCSS: true,
          minifyJS: true
        },  
        files: [{
            expand: true,
            cwd: 'temp',
            src: ['**/*.html', '*.html'],
            dest: 'dist/src'
        }]
      }
    },
    watch: {
      js: {
        files: ['src/assets/scripts/*.js'], // 需要监视的通配文件
        tasks: ['babel'] // 当源文件发生变化是需要执行的任务
      },
      css: {
        files: ['src/assets/styles/*.scss'], // 需要监视的通配文件
        tasks: ['sass'] // 当源文件发生变化是需要执行的任务
      },
      html: {
        files: ['src/**/*.html'], // 需要监视的通配文件
        tasks: ['web_swig'], // 当源文件发生变化是需要执行的任务
        options: {
          livereload: true
        }
      }
    },
    // 热更新服务器
    browserSync: {
      dev:{
        bsFiles: {
          src : [
            'temp/assets/styles/*.css',
            'temp/assets/scripts/*.js',
            'temp/**/*.html'
          ]
      },
      options: {
        watchTask: true,
        // server: 'dist' 按照网上提供的配置方式在此处采坑，折腾很久
        server: {
          baseDir: ['temp','src','public'], //这里的规则是从左到右，依次寻找需要的文件，这样做的目的是减少构建次数 
          //由于node_modules 没有转换到dist 中，会导致页面渲染错乱不完整
          //因此，目前暂时通过使用路由来指定node_modules 文件的路径
          //路由优先于baseDir
          routes:{
            '/node_modules': 'node_modules' 
          }
        }
    }
   }
  }
    
  })
  // grunt.loadNpmTasks('grunt-sass')
  loadGruntTasks(grunt) // 自动加载grunt 里的所有任务

  // grunt.registerTask('default', ['clean', 'sass', 'babel','web_swig', 'copy', 'browserSync', 'watch'])
  //grunt.registerTask('default', [ 'connect','watch'])
  grunt.registerTask('default', ['clean', 'sass', 'babel','web_swig', 'copy', 'cssmin', 'uglify', 'htmlmin', 'browserSync', 'watch'])
}